<template>
  <div>
    <el-card class="box-card">
      <div ref="editor" style="text-align:left;margin: 5px;">
        <div class="editor-content" v-html="content"/>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import E from 'wangeditor'
import { getToken } from '@/utils/auth'
import Cookies from 'js-cookie'
export default {
  props: {
    form: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      headers: {
        'Authorization': 'Bearer ' + getToken()
      },
      editorContent: ``,
      content: ''
    }
  },
  computed: {
    ...mapGetters([
      'ossMultiFileUploadApi'
    ])
  },
  watch: {
    form(value) {
      this.editorContent = value.topic_content
      this.content = value.topic_content
    }
  },
  mounted() {
    var editor = new E(this.$refs.editor)
    editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
    // 不可修改
    // editor.customConfig.uploadImgHeaders = this.headers
    // 自定义文件名，不可修改，修改后会上传失败
    editor.customConfig.uploadFileName = 'files'
    editor.customConfig.uploadImgServer = this.ossMultiFileUploadApi // 上传图片到服务器
    editor.customConfig.onchange = (html) => {
      this.editorContent = html
      this.saveContent()
    }
    editor.customConfig.uploadImgParams = {
      company_id: Cookies.get('company_id')
    }
    editor.create()
  },
  methods: {
    saveContent() {
      this.$emit('saveContent', this.editorContent)
    }
  }
}
</script>

<style lang="scss">
  .editor-content{
    padding-left: 5px;
  }
  .w-e-text-container{
    height: 600px!important;
  }
</style>
